<template>
  <div>
    <!-- 需求: 点击按钮, 切换显示输入框 -->
    <input type="text" v-if="isShowInput" ref="myInput" />
    <button @click="fn">点此搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowInput: false,
    }
  },
  methods: {
    fn() {
      this.isShowInput = true

      //使用组件上的$nextTick方法使操作执行放在下一个dom更新之后：通俗一点讲就是等到Dom更新完之后再调用
      this.$nextTick(() => {
        this.$refs.myInput.focus()
      })
    },
  },
}
</script>
